<template>
  <div class="gift-list-container">
    <!-- <el-page-header @back="handleBack" content="礼物管理"></el-page-header> -->
    
    <el-card>
      <div class="search-bar">
        <el-input 
          v-model="searchForm.giftName" 
          placeholder="请输入礼物名称" 
          style="width: 300px; margin-right: 10px;"
        ></el-input>
        <el-button type="primary" @click="getGiftList">查询</el-button>
        <el-button type="success" @click="handleAdd">新增</el-button>
      </div>
      
      <el-table 
        :data="tableData" 
        border 
        style="width: 100%; margin-top: 10px;"
      >
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="giftName" label="礼物名称"></el-table-column>
        <el-table-column prop="giftValue" label="礼物价值"></el-table-column>
       <!-- <el-table-column label="关联订单ID"> -->
  <!-- <template slot-scope="scope">
    {{ scope.row.orderId === 0 || !scope.row.orderId ? '暂无关联订单' : scope.row.orderId }}
  </template>
</el-table-column> -->
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="creator" label="创建人"></el-table-column>
        <el-table-column label="礼物图片" width="150">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.giftImg"
              :src="scope.row.giftImg"
              fit="cover"
              style="width: 100px; height: 100px;"
              :preview-src-list="[scope.row.giftImg]"
            ></el-image>
            <span v-else>暂无图片</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 10px; text-align: right;"
      ></el-pagination>
    </el-card>
    
    <!-- 新增/编辑弹窗 -->
    <el-dialog 
      :title="dialogTitle" 
      :visible.sync="dialogVisible" 
      width="50%"
    >
      <el-form 
        :model="formData" 
        ref="formData" 
        label-width="100px"
        :rules="formRules"
      >
        <el-form-item label="礼物名称" prop="giftName">
          <el-input v-model="formData.giftName"></el-input>
        </el-form-item>
        <el-form-item label="礼物价值" prop="giftValue">
          <el-input v-model="formData.giftValue" type="number"></el-input>
        </el-form-item>
        <!-- <el-form-item label="关联订单ID" prop="orderId">
          <el-input v-model="formData.orderId" type="number"></el-input>
        </el-form-item> -->
       <el-form-item label="礼物图片">
  <el-upload
    action="http://localhost:8888/admin/gift/upload-image"
    :on-success="handleUploadSuccess"
    :file-list="fileList"
    list-type="picture"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
  <!-- 移除下面的el-image，由el-upload的file-list统一展示 -->
  <!-- <el-image
    v-if="formData.giftImg"
    :src="formData.giftImg"
    fit="cover"
    style="width: 100px; height: 100px; margin-top: 10px;"
  ></el-image> -->
</el-form-item>
        <!-- <el-form-item label="扩展字段A">
          <el-input v-model="formData.A"></el-input>
        </el-form-item>
        <el-form-item label="扩展字段B">
          <el-input v-model="formData.B"></el-input>
        </el-form-item>
        <el-form-item label="扩展字段C">
          <el-input v-model="formData.C"></el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import adminApi from "@/http/adminApi";

export default {
  data() {
    return {
      // 搜索表单
      searchForm: {
        giftName: "",
        tenantId: 1 // 固定租户ID为1
      },
      // 表格数据
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      // 弹窗相关
      dialogVisible: false,
      dialogTitle: "新增礼物",
      formData: {
        id: null,
        giftName: "",
        giftValue: null,
        orderId: null,
        giftImg: "",
        tenantId: 1, // 固定租户ID为1
        A: "",
        B: "",
        C: ""
      },
      fileList: [],
      // 表单验证规则
      formRules: {
        giftName: [
          { required: true, message: "请输入礼物名称", trigger: "blur" }
        ],
        giftValue: [
          { required: true, message: "请输入礼物价值", trigger: "blur" }
        ]
        // 移除了 orderId 的必填验证规则
      }
    };
  },
  created() {
    this.getGiftList();
  },
  methods: {
    // 获取礼物列表
    getGiftList() {
      const params = {
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        tenantId: 1 // 固定租户ID为1
      };
      adminApi.getGiftList(params).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    // 分页相关
    handleSizeChange(val) {
      this.pageSize = val;
      this.getGiftList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getGiftList();
    },
    // 新增
    handleAdd() {
      this.dialogTitle = "新增礼物";
      this.formData = {
        id: null,
        giftName: "",
        giftValue: null,
        orderId: null,
        giftImg: "",
        A: "",
        B: "",
        C: ""
      };
      this.fileList = [];
      this.dialogVisible = true;
    },
    // 编辑
    handleEdit(row) {
      this.dialogTitle = "编辑礼物";
      this.formData = { ...row };
      this.fileList = row.giftImg ? [{ url: row.giftImg }] : [];
      this.dialogVisible = true;
    },
    // 删除
    handleDelete(id) {
      this.$confirm("确定要删除这条记录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        adminApi.deleteGift({ id }).then(res => {
          if (res.code === 200) {
            this.$message.success("删除成功");
            this.getGiftList();
          }
        });
      });
    },
    // 上传成功回调
    handleUploadSuccess(response) {
  // 后端直接返回图片地址字符串，无需取data.url
  this.formData.giftImg = response; 
  this.fileList = [{ url: response }];
},
    // 提交表单
    submitForm() {
      this.$refs.formData.validate(valid => {
        if (valid) {
          const params = {
            ...this.formData,
            tenantId: 1 // 固定租户ID为1
          };
          // 确保 orderId 为 null 而不是空字符串
          if (!params.orderId) {
            params.orderId = 0;
          }
          if (params.id) {
            // 编辑
            adminApi.updateGift(params).then(res => {
              if (res.code === 200) {
                this.$message.success("更新成功");
                this.dialogVisible = false;
                this.getGiftList();
              }
            });
          } else {
            // 新增
            adminApi.addGift(params).then(res => {
              if (res.code === 200) {
                this.$message.success("新增成功");
                this.dialogVisible = false;
                this.getGiftList();
              }
            });
          }
        }
      });
    },
    // 返回
    handleBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.search-bar {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
</style>